<!-- 授信查询 -->
<template>
	<view class="credit-qu-box">
		<view class="credit-qu-box-table">
			<view class="credit-qu-box-thead">
				<view class="credit-qu-box-th w20 flex-th-r">
					<view>申请机构</view>
				</view>
				<view class="credit-qu-box-th  w185 flex-th-r">
					<view>申请日期</view>
				</view>
				<view class="credit-qu-box-th text-l w155">
					<view>授信金额/</view>
					<view>可用金额</view>
				</view>
				<view class="credit-qu-box-th w40 flex-th-r">
					<view>额度状态</view>
				</view>
			</view>
			<view class="credit-qu-box-tr-box" v-for="tr in tableList" :key="tr.id">
				<view v-if="tr.status == '2'">
					<view class="credit-qu-box-tr ">
						<view class="credit-qu-box-td text-l  w20 flex-th-r text-color-error">
							<view>{{tr.bank}}</view>
						</view>
						<view class="credit-qu-box-td text-l w185 flex-th-r text-color-error">
							<view>{{tr.date}}</view>
						</view>
						<view class="credit-qu-box-td text-l w155 text-color-error">
							<view v-if="tr.money == '—'">—</view>
							<view v-else>
								<view>{{tr.money | unitConverter}}/</view>
								<view>{{tr.money | unitConverter}}</view>
							</view>
						</view>
						<view class="credit-qu-box-td w40 text-r flex-th-r">
							<view class="text-color-error" @tap="toDetail(tr)">{{valueToName(tr.status,statusList)}}
								<uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
					</view>
					<view class="text-r text-color-error-remark text-color-error">
						<text>{{tr.remark}}</text>
					</view>
				</view>
				<view v-else>
					<view class="credit-qu-box-tr">
						<view class="credit-qu-box-td text-l w20 flex-th-r">
							<view>{{tr.bank}}</view>
						</view>
						<view class="credit-qu-box-td text-l w185 flex-th-r">
							<view>{{tr.date}}</view>
						</view>
						<view class="credit-qu-box-td text-l w155">
							<view v-if="tr.money == '—'">—</view>
							<view v-else>
								<view>{{tr.money | unitConverter}}/</view>
								<view>{{tr.money | unitConverter}}</view>
							</view>
						</view>
						<view class="credit-qu-box-td w40 text-r flex-th-r">
							<view
								:class="tr.status=='0'?'text-color-info':tr.status=='2'?'text-color-error':'text-color-success'"
								@tap="toDetail(tr)">{{valueToName(tr.status,statusList)}} <uni-icons type="right"
									size="12"></uni-icons> </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						bank: '中国银行',
						date: '2022-01-01',
						money: '—',
						status: '0'
					},
					{
						id: '002',
						bank: '邮储银行',
						date: '2022-01-01',
						money: '—',
						status: '1'
					},
					{
						id: '003',
						bank: '华润银行',
						date: '2022-01-01',
						money: '—',
						status: '2',
						remark: '拒绝原因：资料上传不全不全'
					},
					{
						id: '004',
						bank: '招商银行',
						date: '2022-01-01',
						money: 2000,
						status: '3'
					}
				],
				statusList: [{
						id: '0',
						text: '申请中'
					},
					{
						id: '1',
						text: '审批中'
					},
					{
						id: '2',
						text: '审批拒绝'
					},
					{
						id: '3',
						text: '已授信'
					}
				]
			}
		},
		methods: {
			valueToName(val, list = []) {
				let name = '';
				if (val && list.length) {
					for (let i = 0; i < list.length; i++) {
						if (list[i].id == val) {
							name = list[i].text
							return name;
						}
					}
				}
				return name
			},
			toDetail(item) {

			}
		}
	}
</script>

<style>
	.credit-qu-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
		box-sizing: border-box;
	}

	.credit-qu-box-table {
		margin: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 25rpx 110rpx 20rpx;
		box-sizing: border-box;
	}

	.credit-qu-box-thead {
		line-height: 2;
		padding: 20rpx 0;
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.credit-qu-box-tr-box {
		border-bottom: solid 1rpx #EFEFEF;
	}

	.credit-qu-box-tr-box:last-child {
		border: none;
	}

	.credit-qu-box-tr {
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		text-align: center;
	}


	.credit-qu-box-th {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;

	}

	.flex-th-r {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.credit-qu-box-td {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.w40 {
		width: 170rpx;
	}

	.w185 {
		width: 220rpx;
	}

	.w155 {
		padding-left: 45rpx;
		width: 150rpx;
	}

	.w20 {
		width: 135rpx;
	}

	.text-color-error-remark {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #FF0000;
		text-align: right;
		font-weight: 400;
		margin-bottom: 23rpx;
	}

	.credit-qu-box-td-text-name {
		width: 135rpx;
		height: 66rpx;
		line-height: 1.2;
		overflow: hidden;
	}

	.h66 {
		height: 66rpx;
		overflow: hidden;
	}

	/* .flex-al-cen {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.flex-text-r {
		justify-content: end;
	} */
</style>